// Name:            Dropdown
//
// Description:     Define style for dropdown
//
// Component:       `.am-dropdown`
//
// Sub-objects:     `.am-dropdown-toggle`
//                  `.am-dropdown-content`
//                  `.am-dropdown-header`
//
// Modifiers:       `.am-dropdown-flip`
//                  `.am-dropdown-center`
//                  `.am-dropdown-justify`
//                  `.am-dropdown-up`
//                  `.am-dropdown-stack`
//                  `.am-dropdown-navbar`
//
// States:          `.am-active`
//                  `.am-disabled`
//
// Uses:             Animation
//
// =============================================================================
// Variables
// =============================================================================
@dropdown-bg: #fff;
@dropdown-border-color: #ddd;
@dropdown-divider-bg: #e5e5e5;
@dropdown-link-color: @gray-dark;
@dropdown-link-hover-color: darken(@gray-dark, 5%);
@dropdown-link-hover-bg: #f5f5f5;
@dropdown-link-active-color: @component-active-color;
@dropdown-link-active-bg: @component-active-bg;
@dropdown-link-disabled-color: @gray-light;
@dropdown-header-color: @gray-light;
@dropdown-caret-color: darken(@dropdown-border-color, 5%);
@caret-width-base: 6px;
@dropdown-animation: am-slide-top-fixed;
// Dropdown mixin
// =============================================================================
// Dividers (basically an hr) within dropdowns and nav lists
.nav-divider(@color: #e5e5e5) {
    height: 1px;
    // margin: ((@line-height-computed / 2) - 1) 0;
    overflow: hidden;
    background-color: @color;
}

.@{ns}dropdown {
    position: relative;
    display: inline-block;
    .hook-dropdown;
}

.@{ns}dropdown-toggle:focus {
    outline: 0;
}

.@{ns}dropdown-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: @z-index-dropdown;
    min-width: 160px;
    padding: 15px;
    margin: 9px 0 0;
    text-align: left;
    line-height: @global-line-height;
    background-color: @dropdown-bg;
    border: 1px solid @dropdown-border-color;
    border-radius: @global-radius;
    background-clip: padding-box;
    animation-duration: .15s;
    .hook-dropdown-content;
    .angle-base;
    .angle-up-variant(@dropdown-border-color, @dropdown-bg, 8px);
    &:before, &:after {
        left: 10px;
        top: -8px;
        pointer-events: none;
    }
    &:after {
        top: -7px;
    }
    &.@{ns}active {
        display: block;
        // .animation(@dropdown-animation 0.3s ease-in-out);
    }
    :first-child {
        margin-top: 0;
    }
    &.@{ns}dropdown-no-caret {
        margin-top: 1px;
        &:before, &:after {
            display: none;
        }
    }
}

// Dropdown Up
// =============================================================================
.@{ns}dropdown-up {
    margin: 0 0 9px;
    .hook-dropdown-up;
    &:before, &:after {
        border-bottom: none;
        border-top: 8px solid @dropdown-border-color;
        top: auto;
        bottom: -8px;
    }
    &:after {
        bottom: -7px;
        border-top-color: @dropdown-bg;
    }
    &.@{ns}dropdown-no-caret {
        margin-bottom: 1px;
    }
}

.@{ns}dropdown-flip .@{ns}dropdown-content {
    left: auto;
    right: 0;
    &:before, &:after {
        left: auto;
        right: 10px;
    }
}

// dropdown menu (ul)
// =============================================================================
ul.@{ns}dropdown-content {
    list-style: none;
    padding: 5px 0;
    .hook-dropdown-ul-content;
    // Aligns the dropdown menu to right
    &.@{ns}fr {
        right: 0;
        left: auto;
    }
    // Dividers (basically an hr) within the dropdown
    .@{ns}divider {
        .nav-divider(@dropdown-divider-bg);
        .hook-dropdown-ul-content-divdier;
    }
    // Links within the dropdown menu
    >li>a {
        display: block;
        padding: 6px 20px;
        clear: both;
        font-weight: normal;
        color: @dropdown-link-color;
        white-space: nowrap;
        cursor: pointer;
        &:hover, &:focus {
            text-decoration: none;
            color: @dropdown-link-hover-color;
            background-color: @dropdown-link-hover-bg;
            .hook-dropdown-ul-content-hover;
        }
    }
    // Active state
    >.@{ns}active>a {
        &, &:hover, &:focus {
            color: @dropdown-link-active-color;
            text-decoration: none;
            outline: 0;
            background-color: @dropdown-link-active-bg;
            .hook-dropdown-ul-content-active;
        }
    }
    // Disabled state
    >.@{ns}disabled>a {
        &, &:hover, &:focus {
            color: @dropdown-link-disabled-color;
            .hook-dropdown-ul-content-disabled;
        }
    }
    >.@{ns}disabled>a {
        &:hover, &:focus {
            text-decoration: none;
            background-color: transparent;
            background-image: none; // Remove CSS gradient
            .reset-filter();
            cursor: not-allowed;
            .hook-dropdown-ul-content-disabled;
        }
    }
}

// Dropdown section headers
.@{ns}dropdown-header {
    display: block;
    padding: 6px 20px;
    font-size: @font-size-xs;
    color: @dropdown-header-color;
    .hook-dropdown-header;
}

// Right aligned dropdown
// =============================================================================
.@{ns}fr>.@{ns}dropdown-content {
    right: 0;
    left: auto;
    &:before {
        right: 10px;
        left: auto;
    }
}

// Dropdown out animation
.@{ns}dropdown-animation {
    animation: am-dropdown-animation .15s ease-out;
}

@keyframes am-dropdown-animation {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

// Hooks
// =============================================================================
.hook-dropdown() {}

.hook-dropdown-content() {}

.hook-dropdown-ul-content() {}

.hook-dropdown-ul-content-active() {}

.hook-dropdown-ul-content-hover() {}

.hook-dropdown-ul-content-disabled() {}

.hook-dropdown-ul-content-divdier() {}

.hook-dropdown-up() {}

.hook-dropdown-header() {}

// TODO: 1. 分隔线上下间距调整
